<template>
  <el-card shadow="always" class="m-margin-1">
    <div class="title1">
      天车系统
    </div>
    <el-row :gutter="30">
      <el-col :span="12">
        <div class="card">
          <CarStatus></CarStatus>
          <CarStatusChart></CarStatusChart>
        </div>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="10">
          <el-col :span="12">
            <DriveForm></DriveForm>
          </el-col>
          <el-col :span="11" >
            <SpeedForm></SpeedForm>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col :offset="11">
        <el-button class="cancel-btn" @click="handleStop">立即停止</el-button>
      </el-col>
    </el-row> -->
  </el-card>
</template>

<script setup>
import DriveForm from '@/components/AirCarSystem/DriveForm.vue'
import SpeedForm from '@/components/AirCarSystem/SpeedForm.vue'
import CarStatus from '@/components/AirCarSystem/CarStatus.vue'
import CarStatusChart from '@/components/AirCarSystem/CarStatusChart.vue'
import { failedNotify, successNotify } from '@/comm/index.js'
import { stopMoveApi } from '@/api/drive-api'

function handleStop() {
  stopMoveApi((response) => {
    successNotify('停止行驶成功');
    console.log('停止行驶成功');
  }, (error)=> {
    failedNotify('停止行驶失败');
    console.error('停止行驶失败', error);
  })
}
</script>

<style lang="scss" scoped>

</style>